<template>
    <div class="zixun">
        <PublicHead></PublicHead>
        <div class="ruzhu">
            <div class="ruzhuBox">

                <div class="title">
                    <div>融资需求</div>
                    <div>/&ensp;RONGZIXUQIU</div>
                </div>
                <div class="title2">
                    【融资需求】
                </div>
                <div class="title3">
                    (注：提交内容必须如实反映相关情况，遵守国家法律法规，违者将依法追究相关责任)
                </div>
                <div class="ruzhuForm">
                    <el-form ref="form" label-position="top" :model="formData" :rules="rules">
                        <el-row>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="企业名称" prop="qyName">
                                    <el-input v-model="formData.qyName" placeholder="请输入企业名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="姓名" prop="contactName">
                                    <el-input v-model="formData.contactName" placeholder="请输入姓名"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="手机号码" prop="phone">
                                    <el-input v-model="formData.phone" placeholder="请输入手机号码"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="验证码" prop="code">
                                    <div style="display: flex;">
                                        <div>
                                            <el-input v-model="formData.code" style="width: 280px;margin-right: 11px;">

                                            </el-input>
                                        </div>
                                        <el-button class="yzm" slot="suffix" @click="getcode" :disabled="disabled">{{
                                            yzmshow() }}</el-button>
                                    </div>

                                </el-form-item>

                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="融资金额(万元)" prop="financingAmount">
                                    <el-input v-model="formData.financingAmount" placeholder="请输入融资金额">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="" prop="team">
                                    <el-icon class="iconDownload" name="download"></el-icon>
                                    <a class="text" href="./file/rongzi/中小微企业融资需求汇总表（空表）.xlsx"
                                        download="中小微企业融资需求汇总表（空表）.xlsx">下载融资需求模板</a>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="form-item">
                                <el-form-item label="上传文件" prop="file">
                                    <span slot="label">
                                        <i class="el-icon-folder-add">上传文件</i> </span>

                                    <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'"
                                        :accept="'.pdf'" :headers="{ Authorization: token }" :data="uploadfile()"
                                        :on-success="handlesucess" :file-list="fileList" :limit="3"
                                        :on-exceed="handleExceed">
                                        <el-button size="small" type="primary" style="background-color: #2797E8;
                                                    border-color: #2797E8;">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24" class="form-item">
                                <el-form-item label="备注" prop="remark">
                                    <el-input type="textarea" :rows="5" v-model="formData.remark" placeholder="请输入文本">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="title2">
                    【相关联系科室】
                </div>
                <div class="lianxi">
                    <div>兰州市中小企业公共服务平台</div>
                    <div>投融资项目指导科</div>
                    <div>8593143</div>
                </div>
                <div class="submit">
                    <button @click="submit">我要提交</button>
                </div>
            </div>
            <div class="ruzhuBox2">
                <div class="title2">
                    【融资申请】
                </div>
                <div class="qycount">
                    <div>
                        <img src="../assets/img/reset/qycount.png" alt="">
                        <span>申请企业总数<strong>{{ qyCount }}</strong>个</span>
                    </div>
                    <div>
                        <img src="../assets/img/reset/shuzi.png" alt="">
                        <span>融资金额总数<strong>{{ money }}</strong>万元</span>
                    </div>
                </div>

                <el-table v-if="status == 1" :data="tableData" class="my-table" border style="width: 100%;">
                    <el-table-column width="630px" align="center" label="申请企业" prop="qyName"
                        :label-class-name="'table-header'">
                        <template slot-scope="scope">
                            <div style="display: flex;">
                                <div style="width: 200px;">
                                </div>
                                <div style="width: 200px;text-align:left;">
                                    {{ scope.row.qyName | maskCompanyName() }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="融资金额（万元）" :label-class-name="'table-header'">
                        <template slot-scope="scope">
                            {{ scope.row.financingAmount }}
                        </template>
                    </el-table-column>
                    <el-table-column width="150" align="center" label="提交时间" prop="gmtCreate"
                        :label-class-name="'table-header'">
                    </el-table-column>
                </el-table>

                <el-empty v-if="status != 1" description="暂时没有融资信息"></el-empty>
                <div class="pages" v-if="status == 1">
                    <el-button @click="pervious">上一页</el-button>
                    <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="size" background
                        layout=" pager" :total="total" ref="pageGroup"></el-pagination>
                    <el-button @click="next">下一页</el-button>
                    <span>共{{ Math.ceil(total / size) }}页</span>
                </div>
            </div>

        </div>
        <PublicFoot></PublicFoot>
    </div>
</template>
  
<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { http } from '@/until/http'
import { rongzi_list, download, message_send, rongzi_add, rongzi_count, rongzi_state } from '@/api/api'
export default {
    data() {
        return {
            https: http,
            size: 6,
            page: 1,
            total: 0,
            token: '',
            disabled: false, // 按钮是否可用
            countDown: 60,// 倒计时时间（单位：秒）
            formData: {
                code: "",
                contactName: "",
                file: "",
                financingAmount: '',
                phone: "",
                qyName: "",
                remark: "",
                userId: this.$store.state.userId,
            },
            fileList: [],
            tableData: [
                { id: '1', name: "资料1", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件' },
                { id: '2', name: "资料2", status: "已通过", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件' },
                { id: '3', name: "资料3", status: "未通过", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件' },
                { id: '4', name: "资料4", status: "已通过", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件' },
                { id: '5', name: "资料5", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件' },
            ],
            rules: {
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
                contactName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                financingAmount: [
                    { required: true, message: '请输入融资金额', trigger: 'blur' },
                    { pattern: /^\d+(\.\d{0,2})?$/, message: '请输入纯数字金额,可以保留两位小数', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                qyName: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' },
                ],
                file: [
                    { required: true, message: '请上传文件', trigger: 'blur' },
                ],

            },
            qyCount: null,
            money: null,
            status: null

        };
    },
    methods: {
        //超出限制
        handleExceed() {
            this.$message.warning('每一项只能上传3个文件');
        },
        download() {
            download({ fileId: '1654320053295562753' }).then((res) => {
                console.log(res);
            })
        },
        uploadfile() {
            return { userId: this.$store.state.userId }
        },
        //融资列表
        getdata() {
            rongzi_list({ page: this.page, size: this.size }).then((res) => {
                this.total = res.data.data.total
                this.tableData = res.data.data.records.map(item => ({
                    ...item,
                    gmtCreate: new Date(item.gmtCreate).toISOString().slice(0, 10)
                }));
            })
        },
        yzmshow() {
            return this.disabled == false ? '获取验证码' : this.countDown + '秒后重试'
        },
        //获取验证码
        getcode() {
            message_send({ phone: this.formData.phone }).then((res) => {
                console.log(res.status);
                if (res.status == '200') {
                    this.$message({
                        message: '验证码发送成功',
                        type: 'success'
                    });
                    this.disabled = true; // 禁用按钮
                    let timer = setInterval(() => {
                        if (this.countDown > 0) {
                            this.countDown--;
                        } else {
                            clearInterval(timer);
                            this.disabled = false; // 启用按钮
                            this.countDown = 60; // 重置倒计时时间
                        }
                    }, 1000);
                }
            })
        },
        submit() {
            rongzi_add(this.formData).then((res) => {
                console.log(res.data.state);
                if (res.data.state == '20000') {
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                    this.$router.push('/homepage');
                    this.fileList = []
                } else {
                    this.$message.error(res.data.message)
                }
            })
            console.log(this.formData);
        },
        handlesucess(response) {
            this.formData.file = response.data
        },
        //分页组件
        handleCurrentChange(currentPage) {
            this.page = currentPage
            this.getdata()
        },
        pervious() {
            this.$refs.pageGroup.prev()
        },
        next() {
            this.$refs.pageGroup.next()
        },
    },
    mounted() {
        this.getdata()
        rongzi_count().then((res) => {
            console.log(res.data.data);
            this.qyCount = res.data.data.total
            this.money = res.data.data.money
        })
        rongzi_state().then((res) => {
            this.status = res.data.data.status
        })
        this.token = localStorage.getItem('token')
    },
    filters: {
        maskCompanyName(name) {
            if (name.length <= 4) {
                return "*".repeat(name.length);
            }
            if (name) {
                const visibleChars = name.substring(0, 2) + "*".repeat(name.length - 4) + name.substring(name.length - 2);
                return visibleChars;
            }
        },
        // maskMoney(name) {
        //     if (name) {
        //         const decimalIndex = name.indexOf('.');
        //         if (decimalIndex !== -1) {
        //             const leftDigits = name.slice(0, decimalIndex);
        //             const asterisks = '*'.repeat(Math.min(2, leftDigits.length));
        //             return name.substring(0, 1) + asterisks + name.slice(decimalIndex);
        //         } else {
        //             return name;
        //         }
        //     }
        // }
    },
    components: {
        PublicHead,
        PublicFoot,
    }
}
</script>
  
<style scoped lang="scss">
 .title2 {
    width: 150px;
    height: 40px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
  }
  .lianxi {
  display: flex;
  margin-bottom: 50px;

  div {
    width: 230px;
    height: 55px;
    background: #FAFAFA;
    border: 2px solid #EEEEEE;
    line-height: 55px;
    text-align: center;
  }

  div:nth-of-type(1) {
    width: 30%;
  }
}
.qycount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    div {
        width: 40%;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ECF7FF;

        span {
            margin-left: 20px;
            font-size: 18px;
            letter-spacing: 2px;
            color: #2775de;
            font-weight: bold;

            strong {
                color: #f07700;
                margin: 0px 5px;
                font-size: 22px;
                font-family: Microsoft YaHei;
            }
        }

        img {
            width: 50px;
            height: 50px;
        }
    }
}

.pages {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);

    span {
        margin-left: 10px;
        font-size: 14px;
    }
}

.jine {
    font-family: Microsoft YaHei;
    color: #5F5D5D;
}

.yzm {
    background: #0371E5;
    font-family: Microsoft YaHei;
    color: #FFFFFF;
}

.submit {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px;

    button {
        cursor: pointer;
        width: 98px;
        height: 40px;
        background: #2797E8;
        border-radius: 3px 3px 3px 3px;
        border: 0;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
    }
}

.el-input {
    width: 400px;
}

.ruzhuForm {
    padding: 20px 50px;
}

.ruzhu {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

}

.ruzhuBox2 {
    width: 1220px;
    height: 580px;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 10px 50px;
    margin: 30px 0px;
    position: relative;

    .title2 {
        width: 150px;
        height: 40px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #1285D7;
        margin-top: 30px;
    }
}

.ruzhuBox {
    width: 1220px;
    height: 100%;
    background: #FFFFFF;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px 50px;
    margin: 30px;

    .title {
        display: flex;

        div:nth-of-type(1) {
            width: 80px;
            height: 50px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #262626;
            line-height: 50px;
            margin-bottom: 20px;
            border-bottom: 4px #1285D7 solid;

        }

        div:nth-of-type(2) {
            height: 50px;
            font-size: 15px;
            font-family: Arial;
            font-weight: 400;
            color: #DCDCDC;
            line-height: 53px;
            margin-right: 5px;

            border-bottom: 4px #1285D7 solid;

        }

        div:nth-of-type(3) {
            width: 189px;
            height: 50px;
            font-size: 15px;
            font-family: Arial;
            font-weight: 400;
            color: #DCDCDC;
            line-height: 50px;

            border-bottom: 4px #1285D7 solid;

        }

    }

    .title2 {
        width: 150px;
        height: 40px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #1285D7;
    }

    .title3 {
        width: 1136px;
        height: 51px;
        background: #FDF1F1;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #C70500;
        text-align: center;
        line-height: 51px;
    }
}

.name {
    width: 208px;
    height: 45px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FD8544;
}

.text {
    cursor: pointer;
    color: #1285D7;
    text-decoration: none;
}

.iconDownload {
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
}

.el-table__header {
    background-color: #1285D7 !important;
    color: white;
}

::v-deep .el-table__header th.is-leaf,
::v-deep .el-table__header th.gutter {
    background-color: #1285D7 !important;
    color: white;
    font-size: 16px;
}

::v-deep .el-input__suffix {
    right: 0px;
}

.status {
    width: 48px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #D62502;
}

.el-button--primary {
    background-color: #fd8544;
    border-color: #fd8544;
}
</style>